<template>
   <!-- 人员管理 -->
   <div class="container">
      <el-card
         shadow="never"
         style="padding: 0px;height: 60px;"
      >
         <CardTitle
            :title="pageTitle"
            :hasBackButton="showBackButton"
         ></CardTitle>
         <el-button
            color="#6860FF"
            style="position: absolute; right: 68px; top: 25px"
            @click="addPersonnelRef.openLoading()"
            >新增人员</el-button
         >      </el-card>
      <el-row
         :gutter="0"
         class="full-height-row"
      >
         <!-- 左侧部门树 -->
         <el-col
            :span="4"
            class="full-height-col-left"
         >
            <el-card
               style="background: #f5f8fd;height: 60px;"
               shadow="never"
            >
               <div
                  v-show="!isSearch"
                  style="display: flex; justify-content: space-between; flex-direction: row; align-items: center"
               >
                  <div>组织架构</div>
                  <div
                     @click="handleSearch"
                     style="cursor: pointer;"
                  >
                     <el-icon>
                        <Search />
                     </el-icon>
                  </div>
               </div>
               <div
                  v-show="isSearch"
                  style="display: flex; justify-content: space-between; flex-direction: row; align-items: center"
               >
                  <el-input
                     ref="inputRef"
                     @blur="isSearch = false"
                     autofocus
                     placeholder="请输入"
                     suffix-icon="Search"
                     v-model="filterText"
                  />
               </div>
            </el-card>
            <el-card
               shadow="never"
               class="full-height-card"
               style="overflow-y: scroll"
            >
               <div class="button-container"></div>
               <el-tree
                  highlight-current
                  class="full-height-tree"
                  :data="Array.isArray(departmentTree) ? departmentTree : []"
                  node-key="id"
                  :props="treeProps"
                  accordion
                  :filter-node-method="filterNode"
                  ref="treeRef"
               >
                  <template #default="scope">
                     <div class="custom-tree-node">
                        <span :class="{ 'disabled-node': scope.node.data.status === 0 }">{{ scope.node.label }}</span>
                     </div>
                  </template>
               </el-tree>
            </el-card>
         </el-col>
         <!-- 右侧表单 -->
         <el-col
            :span="20"
            class="full-height-col-right"
         >
            <el-card
               style="padding: 0px; overflow-y: scroll"
               class="full-height-card"
               shadow="never"
            >
               <div
                  class="mb-4 right-container-title"
                  :style="{ height: IsHeight }"
               >
                  <div class="search-box">
                     <el-input
                        v-model="search"
                        style="width: 200px"
                        placeholder="姓名/人员编号/手机号"
                        suffix-icon="Search"
                     />
                     <div style="margin-left: 20px">
                        <span>显示：</span>
                        <el-button color="#F4F5F7">全部人员</el-button>
                        <el-button color="#F4F5F7">在职人员</el-button>
                        <el-button color="#F4F5F7">已激活</el-button>
                        <el-button color="#F4F5F7">已禁用</el-button>
                     </div>
                  </div>
               </div>
               <div class="search-btn">
                  <div
                     class="btn_item"
                     @click="handleClickHeight"
                  >
                     <el-icon><Filter /></el-icon>
                     <span style="margin-left: 5px">高级筛选</span>
                  </div>
               </div>
               <el-table
                  :data="tableData"
                  style="width: 100%; margin-top: 30px"
                  border="true"
               >
                  <el-table-column
                     label="姓名"
                     width="120"
                  >
                     <template #default="scope">{{ scope.row.date }}</template>
                  </el-table-column>
                  <el-table-column
                     property="人员编号"
                     label="Name"
                     width="120"
                  />
                  <el-table-column
                     property="address"
                     label="性别"
                     width="240"
                     show-overflow-tooltip
                  />
                  <el-table-column
                     property="address"
                     label="手机号"
                  />
                  <el-table-column
                     property="address"
                     label="出生日期"
                  />
                  <el-table-column
                     property="address"
                     label="邮箱"
                  />
                  <el-table-column
                     property="address"
                     label="所属部门"
                  />
                  <el-table-column
                     property="address"
                     label="角色"
                  />
                  <el-table-column
                     property="address"
                     label="在职状态"
                  />
                  <el-table-column
                     property="address"
                     label="状态"
                     width="200"
                  >
                     <template #default="scope">
                        <el-switch
                           active-text="激活"
                           inactive-text="禁用"
                           v-model="scope.row.status"
                        />
                     </template>
                  </el-table-column>
                  <el-table-column
                     fixed="right"
                     label="操作"
                     min-width="300"
                     prop="id"
                     align="center"
                  >
                     <template #default="scope">
                        <div class="btn-box">
                           <el-button
                              plain
                              size="small"
                              type="primary"
                              @click=""
                           >
                              编辑
                           </el-button>
                           <el-button
                              plain
                              size="small"
                              type="danger"
                              @click=""
                           >
                              删除
                           </el-button>
                           <el-button
                              plain
                              size="small"
                              type="primary"
                              @click=""
                           >
                              重置密码
                           </el-button>
                           <el-button
                              plain
                              size="small"
                              type="primary"
                              @click=""
                           >
                              操作离职
                           </el-button>
                        </div>
                     </template>
                  </el-table-column>
               </el-table>
               <!-- 分页 -->
               <Pagination
                  class="pagination"
                  @pageSize="pageSize"
                  @getPage="getPage"
                  :page="pageData.page"
                  :page-size="pageData.pageSize"
                  :total="total"
               />
            </el-card>
         </el-col>
      </el-row>
   </div>
   <AddPersonnel ref="addPersonnelRef" />
</template>

<script setup lang="ts">
   import { ref, reactive, computed, watch, nextTick } from "vue";
   import CardTitle from "@/components/card-title/CardTitle.vue";
   import { Plus, Search, Tools, Filter } from "@element-plus/icons-vue";
   import AddPersonnel from "./components/AD_Personnel.vue";
   import { ElMessage } from "element-plus";
   import Pagination from "@/components/Pagination.vue";
   import type { TreeInstance } from "element-plus";

   // 类型定义
   interface User {
      date: string;
      name: string;
      address: string;
   }

   interface Tree {
      label: string;
      children?: Tree[];
      [key: string]: any;
   }

   // 页面基础配置
   const pageTitle = "人员管理";
   const showBackButton = false;

   // 组件引用
   const addPersonnelRef = ref<any>();
   const treeRef = ref<TreeInstance>();
   const inputRef = ref<HTMLInputElement>();

   // 树形控件配置
   const treeProps = {
      children: "children",
      label: "name",
   };

   const defaultProps = {
      children: "children",
      label: "label",
   };

   // 搜索相关状态
   const isSearch = ref<boolean>(false);
   const filterText = ref("");
   const search = ref<string>("");

   // 高级筛选相关
   let nub = ref<number>(0);
   let IsHeight = ref<number | string>(0);

   // 分页相关配置
   const pageData = ref({
      pageSize: 10,
      page: 1,
      house_type: "",
      category: "",
      keywords: "",
   });
   const total = ref(0);

   // 表格数据
   const tabeData = ref([]);
   const tableData: User[] = [
      {
         date: "2016-05-04",
         name: "Aleyna Kutzner",
         address: "Lohrberg",
      },
      {
         date: "2016-05-03",
         name: "Helen Jacobi",
         address: "760 A S",
      },
      {
         date: "2016-05-02",
         name: "Brandon Deckert",
         address: "Arnold-",
      },
      {
         date: "2016-05-01",
         name: "Margie Smith",
         address: "23618 Wind",
      },
   ];

   // 部门树数据
   const departmentTree = ref([
      {
         id: 6,
         parent_id: 0,
         manager_id: 5,
         name: "财务部",
         num: "ORG5571",
         type: 1,
         content: null,
         status: 1,
         created_at: "2024-10-18 16:01:58",
         manager_name: "测试5",
         children: [
            {
               id: 9,
               parent_id: 6,
               manager_id: 0,
               name: "出纳",
               num: null,
               type: 1,
               content: null,
               status: 1,
               created_at: "2024-10-23 11:07:10",
               manager_name: "无",
               children: [],
            },
            {
               id: 10,
               parent_id: 6,
               manager_id: 4,
               name: "审计",
               num: null,
               type: 1,
               content: null,
               status: 1,
               created_at: "2024-10-23 11:07:13",
               manager_name: "测试4",
               children: [],
            },
         ],
      },
   ]);

   // 方法定义
   // 分页相关方法
   const pageSize = (e: number) => {
      pageData.value.pageSize = e;
   };

   const getPage = (e: number) => {
      pageData.value.page = e;
   };

   // 高级筛选相关方法
   const handleClickHeight = () => {
      nub.value++;
      if (nub.value % 2 == 1) {
         IsHeight.value = "40px";
      } else {
         IsHeight.value = "0px";
      }
   };

   // 搜索相关方法
   const handleSearch = () => {
      isSearch.value = true;
   };

   const filterNode = (value: string, data: Tree) => {
      if (!value) return true;
      return data.name.includes(value);
   };

   // 监听器
   // 监听搜索框状态变化
   watch(isSearch, (newVal) => {
      if (newVal) {
         nextTick(() => {
            inputRef.value?.focus();
         });
      }
   });

   // 监听搜索文本变化
   watch(filterText, (val) => {
      treeRef.value!.filter(val);
      if (!val) {
         nextTick(() => {
            treeRef.value?.store.setData(departmentTree.value);
         });
      }
   });

   // 监听分页数据变化
   watch(
      () => pageData.value,
      () => {
         // getAlltabeData();
      },
      { deep: true }
   );
</script>

<style scoped>
   .container {
      height: 80vh;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
   }

   .full-height-row {
      flex: 1;
      min-height: 0;
   }

   .full-height-col-left {
      display: flex;
      flex-direction: column;
      height: 100%;
   }

   .full-height-col-left .full-height-card :deep(.el-card__body) {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 10px;
      background: #f5f8fd;
   }

   .right-container-title {
      background: #fff;
      position: fixed;
      top: 80px;
      z-index: 10;
      display: flex;
      width: 69%;
      padding: 10px;
      transition: all 0.3s;
      overflow: hidden;
   }

   .search-box {
      flex: 1;
   }

   .search-btn {
      display: flex;
      align-items: center;
      gap: 20px;
      position: fixed;
      right: 70px;
      z-index: 10;
      top: 100px;
   }

   .btn_item {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      color: #606266;
   }

   .btn_item:hover {
      color: #6860ff;
   }

   .full-height-col-right {
      display: flex;
      flex-direction: column;
      height: 100%;
      margin-top: 20px;
   }

   .full-height-card {
      flex: 1;
      display: flex;
      flex-direction: column;
   }

   .full-height-card :deep(.el-card__body) {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 10px;
   }

   :deep(.el-tree-node.is-current > .el-tree-node__content .custom-tree-node span) {
      color: #8272ff;
   }

   :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #6860ff;
      border-color: #6860ff;
   }

   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      background-color: #6860ff;
      border-color: #6860ff;
   }

   :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
      color: #606266;
   }
   :deep(.el-switch.is-checked .el-switch__core) {
      background-color: #6860ff;
      border-color: #6860ff;
   }
   /* :deep(.el-switch__label.is-active) {
      color: #6860ff;
   } */
   .full-height-tree {
      flex: 1;
      overflow: auto;
   }

   .mb-4 {
      margin-bottom: 1rem;
   }

   .button-container {
      padding: 0 0px;
      display: flex;
      justify-content: space-between;
   }

   .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 8px;
   }

   :deep(.el-tree-node__content) {
      height: 32px;
   }

   :deep(.title-bar) {
      background: none;
      padding: 0px;
   }

   :deep(.el-card) {
      border: none;
   }
   .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
   }

   ::v-deep .el-input__wrapper {
      background-color: rgba(250, 252, 251, 1);
   }

   ::v-deep .el-table {
      --el-table-header-bg-color: rgba(235, 236, 240, 1);
   }

   ::v-deep .el-table thead {
      color: #444;
   }

   .pagination {
      width: calc(100% - 560px);
      position: fixed;
      bottom: 90px;
      right: 40px;
      padding-top: 10px;
      border-top: 1px solid #98989848;
   }

   ::v-deep .el-pagination.is-background .el-pager li.is-active {
      background-color: #000 !important;
   }
</style>
